<template>
  <div class="container">
    <el-select v-model="county" value-key="county" placeholder="区/县" clearable @change="countyChange">
      <el-option v-for="item in countyList" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="street" value-key="street" placeholder="街道" clearable @change="streetChange">
      <el-option v-for="item in streetList" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="community" value-key="community" placeholder="社区" clearable>
      <el-option v-for="item in communityList" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      county: '',
      street: '',
      community: '',
      countyList: [
        { value: '1', label: '和平' },
        { value: '2', label: '大东' }
      ],
      streetList: [],
      communityList: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
    },
    countyChange (val) {
      if (val === '1') {
        this.streetList = [
          { value: '1', label: '大北街道' },
          { value: '2', label: '小北街道' }
        ]
      } else {
        this.streetList = [
          { value: '3', label: '大北街道1' },
          { value: '4', label: '小北街道1' }
        ]
      }
    },
    streetChange (val) {
      if (val === '1') {
        this.communityList = [
          { value: '1', label: 'A社区' },
          { value: '2', label: 'A社区1' }
        ]
      } else {
        this.communityList = [
          { value: '3', label: 'B社区' },
          { value: '4', label: 'B社区1' }
        ]
      }
    }
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
</style>
